<template>
    <div class="login-container">
        <el-form ref="form" :model="form" label-width="80px" class="login-form" :rules="rules">
            <h2 class="login-title">海洋商店</h2>

            <el-button
                    round
                    @click="open2" style="text-align: center;">
                管理员
            </el-button>
            <el-form-item label="用户名" prop="User" required>
                <el-input v-model="form.username" ></el-input>
            </el-form-item>
            <el-form-item label="密码" prop="password" required>
                <el-input v-model="form.password" show-password></el-input>
            </el-form-item>

            <el-form-item>
                <el-button type="primary" @click="onSubmit">登录</el-button>
                <el-button @click="reg">注册</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>

<script>
    export default {
        name: "Index",
        data() {
            return {
                form: {
                    username: "",
                    password: ""
                },
                rules: {
                    User: [
                        {required: true, message: '请输入用户名', trigger: 'blur'},
                        {max: 15, message: '15 个字符以内', trigger: 'blur'}
                    ],
                    password: [
                        {required: true, message: '请输入密码', trigger: 'blur'},
                        {max: 20, message: '20 个字符以内', trigger: 'blur'}
                    ]
                },
            };
        },
        methods: {
            onSubmit() {


                var _this = this
                const _user = _this.form.username
                const _password = _this.form.password
                axios.get("http://www.qjhyuki.top/vuehomeword/VueShop/api/check_password.php?User="+_user+"&password="+_password)
                    .then(({data}) => {


                    if(data == "1"){
                        console.log("登录成功!");
                        this.$router.push("/manage")
                    }else if(data == "2")
                    {
                        console.log("管理员登录成功!");
                        this.$store.commit("setAdmin")
                        this.$router.push("/manage")

                    }
                    else if (data == "0")
                    {
                        console.log("账号或密码错误")
                        this.$notify({
                            title: '提示',
                            message: '账号或密码错误',
                            type: "error"
                        });
                    }

                })


            },
            reg(){
                var _this = this
                const _user = _this.form.username
                const _password = _this.form.password
                axios.get("http://www.qjhyuki.top/vuehomeword/VueShop/api/reg.php?User="+_user+"&password="+_password)
                    .then(({data}) => {
                        if(data == "1"){
                            this.$notify({
                                title: '提示',
                                message:  '注册成功',
                                type:'success'

                            });
                        }else if(data == "2"){
                            this.$notify({
                                title: '提示',
                                message:  '注册失败，用户名重复',
                                type:'error'

                            });
                        }else if(data == "0"){
                            this.$notify({
                                title: '提示',
                                message:  '输入有误',
                                type:'error'

                            });
                        }

            })},
            open2() {
                this.$notify({
                    title: '提示',
                    message:  '管理员账号密码admin admin',

                });}
        }
    }
</script>

<style acoped>
    .login-form {
        width: 350px;
        margin: 160px auto; /* 上下间距160px，左右自动居中*/
        background-color: rgb(255, 255, 255,0.7); /* 透明背景色 */
        padding: 30px;
        border-radius: 20px; /* 圆角 */
    }

    /* 背景 */
    .login-container {
        position: absolute;

        width: 100%;
        height: 100%;
        background: url("../assets/login.png" ) no-repeat center center;
        background-size: cover;
    }

    /* 标题 */
    .login-title {
        color: #303133;
        text-align: center;
    }
    html,body{
        margin:0;
        padding:0;
    }
</style> -->